<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="音乐,音乐播放器,自制网站">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自制音乐播放器网页版</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <link rel="stylesheet" href="../src/css/reset.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/id.css">
    <link rel="icon" href="../src/image/timg.jpg">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="../src/lyrics/沙龙 - 陈奕迅lyrics.js"></script>
    <script src="../src/lyrics/许廷铿 - 厌弃lyrics.js"></script>
    <script src="../src/lyrics/银临 - 棠梨煎雪lyrics.js"></script>
    <script src="../src/js/lyrics-load.js"></script>
</head>
<body >
    <section id="container-1"  class="col-md-12 clo-sm-12 clo-xs-12 col-lg-12">
        <header id="header" class="full-width unselect-content">
            <h1>自制音乐播放器网页版</h1>
        </header>

        <main id="music-play-main" v-on:mousemove="dotMouseMove" v-on:mouseup="dotMouseUp" v-on:mouseout="dotMouseOut" @mousemove.stop @mouseup.stop @mouseout.stop class="col-md-12 clo-sm-10 col-lg-10 clo-xs-12 col-md-offset-1 clo-sm-offset-1 col-lg-offset-1 unselect-content">
            
            
            <!-- 图片与歌词显示部分 -->
            <section id="music-play" class="full-height ">
                <div id="music-imgs-area" class="fl full-height col-sm-12 col-xs-12 col-lg-8 col-md-8" @click.stop="controlMusicOfImg">
                    <div id="music-imgs">
                        <img  name="img1" :class="musicImg1Class +' transition-all'" v-bind:src="imgSrcs[0]" alt="图片加载失败">
                        <img  name="img2" :class="musicImg2Class +' transition-all'" v-bind:src="imgSrcs[1]" alt="图片加载失败">
                        <img  name="img3" :class="musicImg3Class +' transition-all'" v-bind:src="imgSrcs[2]" alt="图片加载失败">
                    </div>
                    <div id="music-name" class="transition-all" :style="'opacity:' +musicNameAndAutorArea" >
                        <span>{{musicName}}</span>
                        <p></p>
                        <span>作者: {{musicAutor}}</span>
                    </div>
                </div>

                <div id="music-lyrics" class="fl scrollBar-y col-sm-0 col-xs-0 col-lg-4 col-md-4">
                    <div :style="'margin-top:' +lyricsTop">
                        <p v-for="lyrics in musicLyricsArray">{{lyrics.text}}</p>
                    </div>
                    <div class="scrollBar-y-gray" :style="'top:' +scrollBarYTop"></div>
                </div>
            </section>

        </main>


        <!-- 播放、暂停、快进以及显示菜单 -->
        <section id="music-control" v-on:mousemove="dotMouseMove" v-on:mouseup="dotMouseUp" v-on:mouseout="dotMouseOut" @mousemove.stop @mouseup.stop @mouseout.stop class="col-md-10 col-sm-10 col-lg-8 col-xs-12 col-md-offset-1 col-sm-offset-1 col-lg-offset-2">
                <audio id="#audio" ref="audio" v-on:ended="playOver" hidden></audio>

                <!-- 上一首、播放暂停、下一首、停止播放 -->
                <div id="last-music"><span v-on:click="lastMusic" @click.stop class="glyphicon glyphicon-step-backward"></span></div>
                <div id="play-and-stop" ><span @click.stop="playAndStop" :class="playAndStopButton"></span></div>
                <!-- 暂停 glyphicon glyphicon-pause -->
                <div id="next-music"><span @click.stop="nextMusic" class="glyphicon glyphicon-step-forward"></span></div>
                <div id="over"><span v-on:click="over" @click.stop class="glyphicon glyphicon-stop"></span></div>
                
                <!-- 进度条、快进事件、时间 -->
                <div id="progressBar"  v-on:mouseover="progressBarDotShowFunction" v-on:mouseout="progressBarDotHiddenFunction"  @mouseover.stop @mouseout.stop>
                    <div id="progressBar-played" @click.stop="changeMusicCurrent" ref='progressBarPlayed' :style="'width :' +progressBarPlayed" ></div>
                    <div id="progressBar-dot" @mousedown="dotMouseDown" @mousedown.stop v-bind:style="'margin-left:' +progressBarDotLeft +';opacity: ' +progressBarDotHidden"></div>
                    <div ref="musicTime" @click.stop="changeMusicCurrent" id="music-time"></div>
                </div>
                <div id="musicTime" class="unselect-content">
                    <span>{{musicCurrentTime}}</span><span>/</span><span>{{musicTime}}</span>
                </div>


               <!-- 歌曲列表 -->
                <div id="music-list-button" class="fl"><span @click.stop="MusicList" class="glyphicon glyphicon-list"></span></div>
                <div id="music-list" v-if="musicListShow">
                    <div>
                        <span style="border-top-left-radius: 2px;border-top-right-radius: 2px;" @click.stop="showMusicList">歌曲列表</span>
                        <!-- <span style="border-top-left-radius: 5px;border-right: 1px solid #dddddd;" @click.stop="showMusicList">歌曲列表</span> -->
                        <!-- <span style="border-top-right-radius: 5px" @click.stop="showHistoryList">历史列表</span> -->
                    </div>
                    <div class="clear-both"></div>
                    <div @click.stop="changeMusicFromList" v-if="!isHistoryList">
                        <p v-for="(item,index) in musicList" :name="item" :number="index">{{item}}</p>
                    </div>
                    <!-- <div @click.stop="changeMusicFromHistory" v-if="isHistoryList">
                        <p v-for="(item,index) in musicHistory" :name="item">{{item}}</p>
                    </div> -->
                </div>
                <div class="clear-both"></div>
        </section>
    </section>
    <!-- container-1 End -->



    
    <!-- <footer class="full-width col-md-12 clo-sm-12 clo-xs-12 col-lg-12">
        <section>
            <span>autor:Hsc</span>
        </section>
    </footer> -->
    <!-- <script src="../src/js/begin.js"></script> -->
    <script src="../src/js/index.js"></script>
</body>
</html>